<template>
    <L7MapWithGaode :mapOnloadCB="mapOnloadCB"></L7MapWithGaode>
</template>

<script lang="ts">
import {Scene, PolygonLayer, PointLayer, LineLayer} from '@antv/l7';
import {defineComponent, onMounted, ref} from "vue"
import L7MapWithGaode from "@/component/common/L7MapWithGaode.component.vue"

export default defineComponent({
    name: "L7.addText2",
    components: {L7MapWithGaode},
    setup() {
        const colors = [
            '#87CEFA',
            '#00BFFF',

            '#7FFFAA',
            '#00FF7F',
            '#32CD32',

            '#F0E68C',
            '#FFD700',

            '#FF7F50',
            '#FF6347',
            '#FF0000'
        ];

        const mapOnloadCB = (scene: Scene) => {
            scene.setZoomAndCenter(12.5, [118.8, 32.056])

            const fontFamily = 'iconfont';
            const fontPath = `${window.location.origin}/antv-test/data/font/font_2534097_x6rsov3i1g.woff2`;
            scene.addIconFont('icon', '&#xe69e;');
            scene.addFontFace(fontFamily, fontPath);

            fetch(`${window.location.origin}/antv-test/data/94763191-2816-4c1a-8d0d-8bcf4181056a.json`)
                .then(res => res.json())
                .then(data => {

                    const filllayer = new PolygonLayer({name: 'fill', zIndex: 3})
                        .source(data)
                        .shape('fill')
                        .color('count', ['#f2f0f7', '#dadaeb', '#bcbddc', '#9e9ac8', '#756bb1', '#54278f'])
                        .style({
                            opacity: 0.6,
                            opacityLinear: {
                                enable: true,
                                dir: 'out' // in - out
                            }
                        });
                    scene.addLayer(filllayer);

                    const linelayer = new LineLayer({zIndex: 5, name: 'line2'})
                        .source(data)
                        .shape('line')
                        .size(1)
                        .color('#fff')
                        .style({
                            opacity: 0.3
                        });
                    scene.addLayer(linelayer);

                    const pointLayer = new PointLayer({zIndex: 10})
                        .source(data)
                        .shape('icon', 'text')
                        .size(25)
                        .color('count', t => {
                            const c = Number(t.replace('℃', ''));
                            return colors[Math.floor(((c - 18) / 16) * 10)];
                        })
                        .style({
                            textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
                            textOffset: [-25, 15],
                            padding: [2, 2],
                            fontFamily,
                            iconfont: true,
                            textAllowOverlap: true
                        });
                    scene.addLayer(pointLayer);

                    const tempertureLayer = new PointLayer({zIndex: 10})
                        .source(data)
                        .shape('count', 'text')
                        .size(12)
                        .color('count', t => {
                            const c = Number(t.replace('℃', ''));
                            return colors[Math.floor(((c - 18) / 16) * 10)];
                        })
                        .style({
                            textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
                            textOffset: [35, 30],
                            padding: [1, 1]
                        });
                    scene.addLayer(tempertureLayer);

                })
        }

        return {
            mapOnloadCB
        }
    }
})
</script>

<style scoped>

</style>
